<template>
	<view class="share">
		<HeaderBar title="邀请好友" showBack fixed v-if="status">
			<template #right>
				<!-- <image src="/static/images/personal/share.png" mode="widthFix" style="width: 54upx;" @tap="capture">
				</image> -->
			<!-- 	<view class="baocun" @tap="capture">
					保存
				</view> -->
			</template>
		</HeaderBar>
		<view class="contentBox">
			<!-- <image src="../../static/images/personal/shareBg.png" mode="widthFix" class="icon"></image> -->
			<div class="qrbox">
				<!-- <u-qrcode ref="qrCode" canvas-id="qrCanvas" :value="address" :size="150" backgroundColor="#FFF"
					foregroundColor="#000"></u-qrcode> -->
				<image src="/static/images/ewm.png" class="qrcode" mode=""></image>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: true,
				qrCodeImg: '', // 用来保存生成的二维码图片
				address: 'your_address_here', // 替换为二维码要展示的地址
			}
		},
		mounted() {
			this.generateQRCode();
		},
		methods: {
			generateQRCode() {
				this.$nextTick(() => {
					this.$refs.qrCode.make().then((base64Image) => {
						this.qrCodeImg = base64Image; // 将二维码保存为base64格式
					});
				});
			},
			capture() {
				// 隐藏顶部导航栏
				this.status = false;
				uni.showLoading({
					title: '保存中',
					mask: true,
				});
				setTimeout(() => {
					// 获取当前页面的 WebView
					const pages = getCurrentPages();
					const page = pages[pages.length - 1];
					const currentWebview = page.$getAppWebview();

					// 创建 Bitmap 对象
					const bitmap = new plus.nativeObj.Bitmap('amway_img');

					// 将当前 WebView 的内容绘制到 Bitmap 对象中
					currentWebview.draw(bitmap, () => {
						const rand = Math.floor(Math.random() * 10000);
						const saveUrl = '_doc/' + rand + 'a.jpg';

						// 保存 Bitmap 图片
						bitmap.save(saveUrl, {}, (i) => {
							// 保存成功，保存到相册
							uni.saveImageToPhotosAlbum({
								filePath: i.target,
								success: () => {
									uni.showToast({
										title: '保存图片成功',
										icon: 'success',
										duration: 1500,
									});
								},
								fail: (err) => {},
							});
						}, (e) => {});
					}, (e) => {});
					uni.hideLoading();
					this.status = true;
				}, 500);
			}
		}
	}
</script>

<style scoped lang="scss">
	.share {
		height: 100%;
		display: flex;
		flex-direction: column;

		.baocun {
			padding-right: 10upx;
			font-size: 26upx;
		}

		.contentBox {
			display: flex;
			flex: 1;
			background-image: url(/static/images/personal/shareBg.png);
			background-size: 100% 100%;
			flex-direction: column;
			justify-content: flex-end;

			// background: #30902F;
			.icon {
				width: 100%;
			}

			.qrbox {
				margin: 300upx auto;
				padding: 20upx;
				.qrcode {
					width: 400upx;
					height: 400upx;
				}
			}
		}
	}
</style>